<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import {
  getEmpJobDataApi,
  getEmpGenderDataApi,
} from "@/api/report";

// 职位分布
const jobChartRef = ref();
const jobChart = ref();
const jobOption = ref({});
const fetchJobData = async () => {
  const res = await getEmpJobDataApi();
  if (res.code) {
    jobOption.value = {
      title: { text: "员工职位分布", left: "center" },
      tooltip: { trigger: "item" },
      legend: { bottom: 10, left: "center" },
      series: [
        {
          name: "职位",
          type: "pie",
          radius: "60%",
          data: res.data.jobList.map((name, i) => ({ name, value: res.data.dataList[i] })),
          label: { formatter: "{b}: {c} ({d}%)" },
        },
      ],
    };
    if (!jobChart.value) jobChart.value = echarts.init(jobChartRef.value);
    jobChart.value.setOption(jobOption.value);
  }
};

// 性别分布
const genderChartRef = ref();
const genderChart = ref();
const genderOption = ref({});
const fetchGenderData = async () => {
  const res = await getEmpGenderDataApi();
  if (res.code) {
    genderOption.value = {
      title: { text: "员工性别分布", left: "center" },
      tooltip: { trigger: "item" },
      legend: { bottom: 10, left: "center" },
      series: [
        {
          name: "性别",
          type: "pie",
          radius: "60%",
          data: res.data.map(item => ({ name: item.gender == 1 ? "男" : "女", value: item.count })),
          label: { formatter: "{b}: {c} ({d}%)" },
        },
      ],
    };
    if (!genderChart.value) genderChart.value = echarts.init(genderChartRef.value);
    genderChart.value.setOption(genderOption.value);
  }
};

// 部门员工人数分布（模拟数据，后端接口补充后可替换）
const deptChartRef = ref();
const deptChart = ref();
const deptOption = ref({});
const fetchDeptData = async () => {
  // TODO: 替换为后端接口
  const data = [
    { name: "学工部", value: 12 },
    { name: "教研部", value: 8 },
    { name: "咨询部", value: 5 },
    { name: "人事部", value: 3 },
    { name: "财务部", value: 2 },
  ];
  deptOption.value = {
    title: { text: "部门员工人数分布", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: 10, left: "center" },
    series: [
      {
        name: "部门",
        type: "pie",
        radius: "60%",
        data,
        label: { formatter: "{b}: {c} ({d}%)" },
      },
    ],
  };
  await nextTick();
  if (!deptChart.value) deptChart.value = echarts.init(deptChartRef.value);
  deptChart.value.setOption(deptOption.value);
};

// 近一月新增趋势（模拟数据，后端接口补充后可替换）
const trendChartRef = ref();
const trendChart = ref();
const trendOption = ref({});
const fetchTrendData = async () => {
  // TODO: 替换为后端接口
  const days = Array.from({ length: 30 }, (_, i) => `8-${i + 1}`);
  const emp = days.map(() => Math.floor(Math.random() * 5));
  const student = days.map(() => Math.floor(Math.random() * 10));
  const clazz = days.map(() => Math.floor(Math.random() * 2));
  trendOption.value = {
    title: { text: "近一月新增趋势", left: "center" },
    tooltip: { trigger: "axis" },
    legend: { top: 30, left: "center" },
    xAxis: { type: "category", data: days },
    yAxis: { type: "value" },
    series: [
      { name: "员工", type: "line", data: emp },
      { name: "学员", type: "line", data: student },
      { name: "班级", type: "line", data: clazz },
    ],
  };
  await nextTick();
  if (!trendChart.value) trendChart.value = echarts.init(trendChartRef.value);
  trendChart.value.setOption(trendOption.value);
};

onMounted(() => {
  fetchJobData();
  fetchGenderData();
  fetchDeptData();
  fetchTrendData();
});
</script>

<template>
  <div>
    <h2>员工信息统计</h2>
    <div style="display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px;">
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="jobChartRef" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="genderChartRef" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div style="display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px;">
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="deptChartRef" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="trendChartRef" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
h2 {
  margin-bottom: 24px;
}
</style>
